<template>
  <div class="box">
    <SearchVue class="SearchVue"></SearchVue> 
    <div class="content">   
     <BannerVue></BannerVue>
     <StoreListVue></StoreListVue>
    </div>
     <TabbarVue class="footer"></TabbarVue>
  </div>
</template>

<script>
import SearchVue from "@/components/Search.vue";
import BannerVue from "@/components/Banner.vue";
import StoreListVue from "@/components/StoreList.vue";
import TabbarVue from "@/components/Tabbar.vue";
export default {
    name:"Home",
    components:{
      SearchVue,BannerVue,StoreListVue,TabbarVue
    }
}
</script>

<style scoped>
.box{
  height: 100%;
 display: flex;
 flex-direction: column;
}
.SearchVue{
  height: 40px;
}
.footer{
height: 40px;
}
.content{
  flex: 1;
  overflow: auto;
}
</style>
